﻿// 將此頁的btn設為選中 ID由asp.net生成 
$('#ContentPlaceHolder1_UserPageLinkList1_linkUserProfile').addClass('active');

/*日期選單*/
$(function () {
    /*軒哥區*/
    /*更新密碼畫面*/
    // Black Container
    // btn登入鍵click event. show預覽畫面
    $('.black-container').hide();
    $('#lnkChangePwd').click(function () {
        $('.black-container').fadeTo(500, 1).show();
        // 先將body拉霸隱藏 才顯示預覽畫面(包含預覽畫面的拉霸)
    });

    // 表單外部黑色屏蔽click event
    $('.black-container').click(fadeBlackContainer);

    function fadeBlackContainer() {
        $('.black-container').fadeTo(500, 0, hideBlackContainer);
    };
    function hideBlackContainer() {
        $(this).hide();
        $("#TextUserProfilePW1").val("");
        $("#TextUserProfilePW2").val("");
        $("#lblErrorMessage").hide();
        // 當預覽黑幕全部消失
    };
    $('.change-pwd-container').click(function (event) {
        event.stopPropagation();
    })
    // Black Container
    /*軒哥區*/
    var yearID = "SelectUserProfileYear";
    var monthID = "SelectUserProfileMonth";
    var dayID = "SelectUserProfileDay";
    function calendar() {
        var yearstart = new Date().getFullYear() - 1;/*年起始*/
        var yearend = new Date().getFullYear() - 120;/*年結束*/
        /*產生年Option*/
        var opt = "";
        for (i = yearstart; i >= yearend; i--) {
            opt += "<option>" + i + "</option>";
        }
        $("#" + yearID).html(opt);
        /*產生月Option*/
        opt = "";
        for (i = 1; i <= 12; i++) {
            opt += "<option>" + i + "</option>";
        }
        $("#" + monthID).html(opt);
        /*取得選年月*/
        var yearindex = document.getElementById(yearID).selectedIndex;
        var monthindex = document.getElementById(monthID).selectedIndex;
        /*取得本月日數*/
        var date = new Date(
            document.getElementById(yearID).childNodes[yearindex].value,
            document.getElementById(monthID).childNodes[monthindex].value,
            0);
        var daynum = date.getDate();
        /*產生日Option*/
        opt = "";
        for (i = 1; i <= daynum; i++) {
            opt += "<option>" + i + "</option>";
        }
        $("#" + dayID).html(opt);
    }
    /*改變顯示年月日*/
    function changcalendar() {
        /*選得選到年月*/
        var yearindex = document.getElementById(yearID).selectedIndex;
        var monthindex = document.getElementById(monthID).selectedIndex;
        /*取得本月日數*/
        var date = new Date(
            document.getElementById(yearID).childNodes[yearindex].value,
            document.getElementById(monthID).childNodes[monthindex].value,
            0);
        var daynum = date.getDate();
        /*許德選單日數*/
        var daylength = document.getElementById(dayID).childNodes.length;
        /*增減日28-31*/
        if (daynum > daylength) {
            for (i = daylength + 1; i <= daynum; i++) {
                var opt = window.document.createElement("option");
                opt.value = i;
                opt.innerHTML = i;
                document.getElementById(dayID).appendChild(opt);
            }
        }
        else if (daynum < daylength) {
            for (i = daylength - 1 ; i > daynum - 1; i--) {
                document.getElementById(dayID).removeChild(document.getElementById(dayID).childNodes[i]);
            }
        }
    }
    /*顯示選單,賦予事件*/
    calendar();
    document.getElementById(yearID).onchange = changcalendar;
    document.getElementById(monthID).onchange = changcalendar;
});
/*頁面初始化*/
$(function () {
    $(":input").keypress(function (event) {
        if (event.which == 13) {
            return false;
        }
    });
    /*隱藏錯誤訊息*/
    $("#lblErrorMessage").hide();
    /*綁定File檢查是否為圖檔*/
    FileCheckEvent();
    /*讀取資料*/
    LoadUserData();
    /*綁定取消重讀*/
    $("#ButtonUserProfileLoad").click(function () { LoadUserData(); });
    /*更新資料*/
    $("#ButtonUserProfileUpdate").click(function () {
        var Result = FNameCheck($("#TxtUserProfileFName").val());
        if (Result) {
            Result = LNameCheck($("#TxtUserProfileLName").val());
            if (Result) {
                Result = EmailCheck($("#TxtUserProfileEmail").val());
                if (Result) {
                    Result = PhoneCheck($("#TxtUserProfilePhone").val());
                }
            }
        }
        if (!Result) { alert("輸入有誤"); }
        else {
            if ($("#FileProfileUpload").val() != "") {//有圖修改
                $.ajaxFileUpload({
                    url: "./Handler/HandlerUserProfile.ashx",
                    data: {
                        type: '2'
                        , type2: 'a'
                        , fname: $("#TxtUserProfileFName").val()
                        , lname: $("#TxtUserProfileLName").val()
                        , year: $("#SelectUserProfileYear").val()//組成日期再傳會當被作運算式XXXX-XX-XX
                        , month: $("#SelectUserProfileMonth").val()
                        , day: $("#SelectUserProfileDay").val()
                        , email: $("#TxtUserProfileEmail").val()
                        , phone: $("#TxtUserProfilePhone").val()
                    },
                    dataType: "text",
                    secureuri: false,
                    fileElementId: "FileProfileUpload",//是NAME
                    success: function (data, status) {
                        //data.html()去除標籤$.ajaxFileUpload自動加的
                        if ($(data).html() == "True") {
                            alert("更新成功");
                        }
                        else {
                            alert("更新失敗");
                        }
                        $("#TextUserProfilePW1").val("");
                        $("#TextUserProfilePW2").val("");
                        FileCheckEvent();//綁定File檢查是否為圖檔,$.ajaxFileUpload執行過後change事件會消失
                    },
                    error: function (data, status, e) {
                        alert("修改失敗");
                        FileCheckEvent();//綁定File檢查是否為圖檔,$.ajaxFileUpload執行過後change事件會消失
                    }
                });
            }
            else {//無圖修改
                $.ajax({
                    url: "./Handler/HandlerUserProfile.ashx"
                    , type: "post"
                    , data: "type=2"
                        + "&type2=b"
                    + "&fname=" + $("#TxtUserProfileFName").val()
                    + "&lname=" + $("#TxtUserProfileLName").val()
                    + "&year=" + $("#SelectUserProfileYear").val()
                    + "&month=" + $("#SelectUserProfileMonth").val()
                    + "&day=" + $("#SelectUserProfileDay").val()
                    + "&email=" + $("#TxtUserProfileEmail").val()
                    + "&phone=" + $("#TxtUserProfilePhone").val()
                    , success: function (data, status) {
                        if (data == "True") {
                            alert("更新成功");
                            $("#TextUserProfilePW1").val("");
                            $("#TextUserProfilePW2").val("");
                        }
                        else {
                            alert("更新失敗");
                            $("#TextUserProfilePW1").val("");
                            $("#TextUserProfilePW2").val("");
                        }
                    }
                    , error: function (data) {
                        alert("修改失敗");
                    }
                });
            }
        }
    });
    /*更新密碼*/
    $("#ButtonUserProfilePW").click(function () {
        var Result = PW1Check($("#TextUserProfilePW1").val());
        if (Result) {
            Result = PW2Check();
            if (Result) {
                if ($("#TextUserProfilePW1").val() == "") {
                    Result = false;
                }
            }
        }
        if (!Result) {
            alert("格式有誤");
        }
        else {
            $.ajax({
                url: "./Handler/HandlerUserProfile.ashx"
                , type: "post"
                , data: "type=3"
                + "&password=" + $("#TextUserProfilePW1").val()
                , success: function (data) {
                    if (data == "True") {
                        alert("更新成功");
                        $("#TextUserProfilePW1").val("");
                        $("#TextUserProfilePW2").val("");
                    }
                    else {
                        alert("更新失敗");
                        $("#TextUserProfilePW1").val("");
                        $("#TextUserProfilePW2").val("");
                    }
                }
                , error: function () {
                    alert("修改失敗");
                }
            });
        }
    });
    /*姓氏輸入檢察*/
    $("#TxtUserProfileFName").keypress(function (e) {
        if (e.keyCode == 32)/*32空白*/ {
            return false;
        }
    })
        .blur(function () {
            FNameCheck($(this).val());
        });
    /*姓名輸入檢查*/
    $("#TxtUserProfileLName").keypress(function (e) {
        if (e.keyCode == 32)/*32空白*/ {
            return false;
        }
    })
        .blur(function () {
            LNameCheck($(this).val());
        });
    /*信箱輸入檢查*/
    $("#TxtUserProfileEmail").keypress(function (e) {
        if (e.keyCode == 32)/*32空白*/ {
            return false;
        }
    })
        .blur(function () {
            EmailCheck($(this).val());
        });
    /*電話輸入檢查*/
    $("#TxtUserProfilePhone").keypress(function (e) {
        if (e.keyCode == 32)/*32空白*/ {
            return false;
        }
    })
        .blur(function () {
            PhoneCheck($(this).val());
        });
    /*密碼輸入檢查*/
    $("#TextUserProfilePW1").keypress(function (e) {
        if (e.keyCode == 32)/*32空白*/ {
            return false;
        }
    })
        .blur(function () {
            PW1Check($(this).val());
        });
    /*密碼輸入2檢查*/
    $("#TextUserProfilePW2").keypress(function (e) {
        if (e.keyCode == 32)/*32空白*/ {
            return false;
        }
    })
        .blur(function () {
            PW2Check();
        });
});
/*File檢查是否為圖檔*/
function FileCheckEvent() {
    $("#FileProfileUpload").on('change', function () {
        var file = $("#FileProfileUpload").val();
        //alert($("#FileProfileUpload").val())
        if (!file.match(/^([0-9a-zA-Z_\-~ :\\])+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.gif|.GIF|.png|.PNG)$/)) {
            alert("只能是jpg,bmp,png,檔名由數字與英文組成");
            $(this).val("");
            $("#FileProfileImage").attr("src", "images/noperson.png");
        }
        else {//圖片預覽
            var theFiles = document.getElementById("FileProfileUpload").files;
            fileSize = theFiles[0].size;
            if (fileSize > (100 * 1024)) {
                alert("檔案超過100k");
                $(this).val("");
                $("#FileProfileImage").attr("src", "images/noperson.png");
            }
            else {
                for (var i = 0; i < theFiles.length; i++) {
                    var reader = new FileReader();
                    reader.readAsDataURL(theFiles[i]);
                    reader.onload = function (e) {
                        var fileContent = e.target.result;
                        $("#FileProfileImage").attr("src", fileContent);
                    }
                }
            }
        }
    });
};
/*讀取資料*/
function LoadUserData() {
    $.ajax({
        url: "./Handler/HandlerUserProfile.ashx"
        , type: "post"
        , data: "type=1"
        , success: function (data) {
            $.each(data, function (name, value) {
                $.each(value, function () {
                    if (this.Fname == null) {
                        $("#TxtUserProfilePhone").attr("placeholder", "姓氏未填");
                    }
                    else {
                        $("#TxtUserProfileFName").val(this.Fname);
                    }
                    if (this.Lname == null) {
                        $("#TxtUserProfilePhone").attr("placeholder", "姓名未填");
                    }
                    else {
                        $("#TxtUserProfileLName").val(this.Lname);
                    }
                    if (this.Phone == null) {
                        $("#TxtUserProfilePhone").attr("placeholder", "電話未填");
                    }
                    else {
                        $("#TxtUserProfilePhone").val(this.Phone);
                    }
                    if (this.Email == null) {
                        $("#TxtUserProfileEmail").attr("placeholder", "信箱未填");
                    }
                    else {
                        $("#TxtUserProfileEmail").val(this.Email);
                    }
                    if (this.BYear != null) {
                        $("#SelectUserProfileYear").val(this.BYear);
                    }
                    if (this.BMonth != null) {
                        $("#SelectUserProfileMonth").val(this.BMonth);
                    }
                    if (this.BDay != null) {
                        $("#SelectUserProfileDay").val(this.BDay);
                    }
                    if (this.Picture != null) {
                        $("#FileProfileImage").attr("src", "data:image/jpg;base64," + this.Picture);
                    }
                });
            });
        }
    });
}
/*輸入檢查Function*/
function InputCheck(Type, Target) {
    switch (Type) {
        case "0":        /*檢查是否為空*/
            if (Target == "") {
                return true;
            }
            else {
                return false;
            }
            break;
        case "1":        /*檢查只能有中文跟字母*/
            var re = /^[A-Za-z\u4E00-\u9FA5\uF900-\uFA2D]+$/;//不可有^$起始結束符號
            if (!re.test(Target)) {
                return false;
            }
            else {
                return true;
            }
            break;
        case "2":        /*檢查信箱*/
            var re = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;//不可有^$起始結束符號
            if (!re.test(Target)) {
                return false;
            }
            else {
                return true;
            }
            break;
        case "3":        /*只能輸入數字*/
            var re = /(?=.*[^0-9])/;
            if (re.test(Target)) {
                return false;
            }
            else {
                return true;
            }
            break;
        case "4":        /*檢查只能有數字跟字母*/
            var re = /(?=.*[^a-z A-Z 0-9])/;//不可有^$起始結束符號
            if (re.test(Target)) {
                return false;
            }
            else {
                return true;
            }
            break;
        case "5":        /*檢查必包含數字跟字母*/
            var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{7,20}$/;
            if (!re.test(Target)) {
                return false;
            }
            else {
                return true;
            }
            break;
        case "6":        /*檢查長度8-20*/
            if ((Target.length > 7) && (Target.length < 21)) {
                return true;
            }
            else {
                return false;
            }
        case "7":        /*檢查手機電話*/
            var re = /^09[0-9]{2}[0-9]{6}$/;
            if (!re.test(Target)) {
                return false;
            }
            else {
                return true;
            }
            break;
    }
}
/*姓氏輸入檢察*/
function FNameCheck(str) {
    var FNameResult = InputCheck("0", str);
    if (FNameResult) {
        $("#SpanUserProfileFName").html("通過");
    }
    else {
        var FNameResult = InputCheck("1", str);
        if (FNameResult) {
            $("#SpanUserProfileFName").html("通過");
        }
        else {
            $("#SpanUserProfileFName").html("格式不符,須英文或中文");
        }
    }
    return FNameResult;
}
/*姓名輸入檢查*/
function LNameCheck(str) {
    var LNameResult = InputCheck("0", str);
    if (LNameResult) {
        $("#SpanUserProfileLName").html("通過");
    }
    else {
        var LNameResult = InputCheck("1", str);
        if (LNameResult) {
            $("#SpanUserProfileLName").html("通過");
        }
        else {
            $("#SpanUserProfileLName").html("格式不符,須英文或中文");
        }
    }
    return LNameResult;
}
/*信箱輸入檢查*/
function EmailCheck(str) {
    var EmailResult = InputCheck("0", str);
    if (str == "") {
        $("#SpanUserProfileEmail").html("通過");
    }
    else {
        EmailResult = InputCheck("2", str);
        if (EmailResult) {
            $("#SpanUserProfileEmail").html("通過");
        }
        else {
            $("#SpanUserProfileEmail").html("格式不符");
        }
    }
    return EmailResult;
}
/*電話輸入檢查*/
function PhoneCheck(str) {
    var PhoneResult = InputCheck("0", str);
    if (str == "") {
        $("#SpanUserProfilePhone").html("通過");
    }
    else {
        PhoneResult = InputCheck("7", str);
        if (PhoneResult) {
            $("#SpanUserProfilePhone").html("通過");
        }
        else {
            $("#SpanUserProfilePhone").html("格式不符");
        }
    }
    return PhoneResult
}
/*密碼輸入檢查*/
function PW1Check(str) {
    var PW1Result = InputCheck("0", str);
    if (str == "") {
        $("#lblErrorMessage").html("格式不符");
    }
    else {
        PW1Result = InputCheck("6", str);
        if (PW1Result) {
            PW1Result = InputCheck("5", str);
            if (PW1Result) {
                $("#lblErrorMessage").html("格式通過");
                $("#lblErrorMessage").show();
            }
            else {
                $("#lblErrorMessage").html("格式不符,須包含大小寫英文、數字");
                $("#lblErrorMessage").show();
            }
        }
        else {
            $("#lblErrorMessage").html("格式不符,長度需8-20");
            $("#lblErrorMessage").show();
        }
    }
    return PW1Result;
}
/*密碼輸入2檢查*/
function PW2Check() {
    if ($("#TextUserProfilePW1").val() != $("#TextUserProfilePW2").val()) {
        $("#lblErrorMessage").html("確認密碼輸入不符");
        $("#lblErrorMessage").show();
        var PW2Result = false;
    }
    else {
        $("#lblErrorMessage").html("");
        $("#lblErrorMessage").hide();
        var PW2Result = true;
    }
    return PW2Result;
}